<style rel="stylesheet/scss" lang="scss" scoped>
	.model-containter {
		display: flex;
		flex: 1;
		min-height: 100%;
		padding: 10px;
		box-sizing: border-box;
		flex-direction: column;
		.content {
			display: flex;
			height: 100%;
			flex-direction: column;
			.content-head {
				width: 100%;
				
				padding: 5px 5px;
				border: 1px solid #f0f0f0;
				.head-tit {
					width: 100%;
					height: 30px;
					display: flex;
					line-height: 40px;
					.text-q {
						color: #409EFF;
					}
				}
				.m-t-30 {
					margin-top: 30px;
				}
			}
		}
		.td-pro {
			width: 100%;
			min-height: 60px;
			display: flex;
			align-items: center;
			padding: 10px 5px;
			box-sizing: border-box;
			border-bottom: 1px solid #E5E5E5;
			>img {
				width: 60px;
				height: 60px;
				margin-right: 5px;
			}
			.det-desc {
				flex: 1;
				display: flex;
				align-items: center;
			}
			.det-price {
				min-width: 100px;
				display: flex;
				height: 100%;
				align-items: center;
				flex-direction: column;
			}
		}
		.td-pro:last-child {
			border-bottom: none;
		}
		.table-box {
			padding: 0px;
			height: auto;
			margin-top: 5px;
			overflow: auto;
			font-size: 14px;
			//border-bottom: 1px solid #E5E5E5;
		}
		.table-b {
			font-size: 14px;
			border-color: #f0f0f0;
			tr{
				border: none;
			}
			td {
				text-align: center;
				color: #666;
				border:none;
				border-color: #f0f0f0;
				border-bottom:1px solid #f0f0f0;
				border-right:1px solid #f0f0f0;
				//border: 1px solid #F0F0F0;
				&:first-child{
					border-left:1px solid #f0f0f0;
				}
			}
			th {
				color: #666;
				height: 40px;
				border:none;
				border-bottom:1px solid #f0f0f0;
				border-right:1px solid #f0f0f0;
				border-top:1px solid #f0f0f0;
				
				
			}
			th:first-child{
				border-left:1px solid #f0f0f0;
			}
		}
		.pay-box {
			display: flex;
			flex-direction: column;
			>span {
				margin-bottom: 5px;
			}
		}
		.max-btn-w {
			width: 80px;
			margin: 0 auto;
			margin-bottom: 10px;
		}
		.box-flex{
			display: flex;
			align-items: center;
			
		}
		.sp-w-50{
			width: auto;
			line-height: 40px;
		}
		.box-flex-center{
			justify-content: center;
			align-items: center;
			margin-top: 10px;
		}
	}
</style>
<template>
	<div class="model-containter">
		<!--tabs 公用tab -->
		<tabs :target-list="targetList"></tabs>
		<div class="content" v-if="tabCurrentIndex == 1">
			<div class="content-head">
				<div class="head-tit">
					<template>
						<el-select v-model="filter" placeholder="请选择" size="mini">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</template>
					<el-input maxLength="20" style="width: 150px;" class="m-l-10" v-model="keyword" size="mini"></el-input>
					<span class="m-l-10 m-r-10 text-14">下单时间:</span>
					<el-date-picker v-model="beginTime" type="datetime" placeholder="选择开始时间" align="right" :picker-options="pickerOptions1" size="mini">
					</el-date-picker>
					<span class="m-l-10 m-r-10 text-14">至:</span>
					<!--<el-input placeholder="店名关键字" maxLength="20" style="width: 150px;" class="m-l-10"></el-input>-->
					<el-date-picker v-model="endTime" type="datetime" placeholder="选择结束时间" align="right" :picker-options="pickerOptions1" size="mini">
					</el-date-picker>
					<span class="m-l-10 text-q text-14" @click="getOneWeekDate(1)" style="cursor: pointer;">最近7天</span>
					<span class="m-l-10 text-q text-14" @click="getOneWeekDate(2)" style="cursor: pointer;">最近30天</span>
				</div>
				<div class="head-tit m-t-10 box-flex">
					<span class="text-q text-14">商品名称:</span>
					<el-input placeholder="商品名称" maxLength="20" style="width: 150px;" class="m-l-10 " v-model="name" size="mini"></el-input>
					<span class="m-l-10 text-q m-r-10 text-14">订单状态:</span>
					<el-select v-model="orderstatus" placeholder="请选择" size="mini">
						<el-option v-for="item in orderStausList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-button type="primary" @click="screenFn(1)" size="mini" class="m-l-10">筛选</el-button>
					<el-button type="primary" @click="screenFn(2)" size="mini">重置</el-button>
				</div>
				<el-row class="m-t-10">
					
					
					<!--<el-button type="primary">导出excel</el-button>-->
				</el-row>
			</div>
			<div class="table-box" v-if="orderList && orderList.length>0">
				<table cellpadding="0" cellspacing="0"  class="table-b" border="border" style="border:none;width: 100%;">
					<tr>
						<th width="300" class="min-td-width">商品</th>
						<th width="150">单价/数量</th>
						<th width="156">总金额</th>
						<th width="300">买家</th>
						<th width="109">下单时间</th>
						<th width="130">地址</th>
						<th width="80">订单状态</th>
						<th width="130">操作</th>
					</tr>
					<template v-for="(item, index) in orderList">
						<tr>
							<td colspan="8">
								<div style="height: 35px;line-height: 35px;">
									订单号: {{item.id}}
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="td-pro" v-for="(element, childIndex) in item.detailList">
									<img   v-lazy="element.goodsIcon"/>
									<div class="det-desc">{{element.goodsName}}</div>
									<div class="det-price">
										<span>{{element.price}}元</span>
										<span>{{element.num}}件</span>
									</div>
								</div>

							</td>
							<td>
								<div class="pay-box">
									<span>实际支付: {{item.payTotal}}</span>
									<span>原价: {{item.oriPrice}}</span>
									<span v-if="(item.oriPrice - item.payTotal) > 0">优惠: {{item.oriPrice - item.payTotal}}</span>
								</div>
							</td>
							<td>
								<div class="pay-box">
									<span>{{item.contactName}}</span>
									<span>{{item.contactPhone}}</span>
								</div>
							</td>
							<td>
								<span>{{item.createTime}}</span>
							</td>
							<td>
								<span>{{item.address}}</span>
							</td>
							<td>
								<span v-if="item.orderStatus == 'ORDER_WAIT_PAY'">待支付订单</span>
								<span v-if="item.orderStatus == 'ORDER_INPAY'">正在支付</span>
								<span v-if="item.orderStatus == 'ORDER_CANCEL_PAY'">取消支付订单</span>
								<span v-if="item.orderStatus == 'ORDER_WAIT_SENDGOODS'">待发货订单</span>
								<span v-if="item.orderStatus == 'ORDER_WAIT_RECVGOODS'">待收货订单</span>
								<span v-if="item.orderStatus == 'ORDER_WAIT_REVIEW'">待评论</span>
								<span v-if="item.orderStatus == 'ORDER_END_GOODS'">订单完成</span>
								<span v-if="item.orderStatus == 'ORDER_ON_ACCOUNT'">挂账下单</span>
								<span v-if="item.orderStatus == 'ORDER_ON_ACCOUNT_CANCEL'">挂账下单关闭</span>
							</td>
							<td>
								<div class="pay-box">
									<el-button type="primary" size="mini" class="max-btn-w" v-if="item.orderStatus == 'ORDER_WAIT_SENDGOODS'" @click="showDialog(item)">发货</el-button>
									<span style="color: #1973bf; cursor: pointer;" @click="orderDetail(item)">详情</span>
								</div>
							</td>
						</tr>
					</template>
				</table>
			</div>
		</div>
		<el-dialog title="发货" center :visible.sync="dialogTabMaintenance" width="30%">
			<el-row class="p-all-20 ">
				<el-col :span="20" class="box-flex m-b-10"  >
					<span class="sp-w-50 m-r-10">物流公司</span>
					<el-select v-model="logValue" placeholder="请选择" style="width:220px">
						<el-option v-for="item in logList"  :value="item.code"  :label="item.name">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10" >物流单号</span>
					<el-input  v-model="logCode"  style="width:220px"/>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">发货日期</span>
					<el-date-picker v-model="deliveryTime" type="datetime" placeholder="选择时间" align="right" :picker-options="pickerOptions1">
					</el-date-picker>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10  box-flex-center" >
					<el-button type="primary" @click="submitManager(1)">确定</el-button>
					<el-button type="primary" @click="submitManager(2)" >取消</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		<current-page :current-page="page" :page-size="pageSize" :page-total="pageTotal" v-if="tabCurrentIndex == 1" @handleCurrentChange="handleCurrentChange">
		</current-page>
		<!--订单详情-->
		<order-detail :orde-info="ordeInfo" v-if="tabCurrentIndex == 2"></order-detail>
	</div>
</template>
<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import tabs from '@/components/tabs/tabs.vue'
	import {
		getToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import currentPage from '@/components/current-page/current-page.vue'
	import orderDetail from './components/order-Detail.vue'
	export default {
		data() {
			return {
				filter: '', // 过滤
				keyword: '', // 关键词
				page: 0, // 页码
				pageSize: 10, // 每页显示条数
				filterBeginTime: '',
				deliveryTime:'',
				filterNedTime: '',
				logCode: '',
				targetOrderId: '',
				beginTime: '', // 开始时间
				endTime: '', // 结束时间
				name: '', // 商品名称
				orderstatus: '', // 订单状态
				options: [{
						value: 'mobile',
						label: '收货人手机号'
					},
					{
						value: 'name',
						label: '收货人姓名'
					},
					{
						value: 'orderId',
						label: '订单号'
					}
				],
				targetList: {},
				orderList: [],
				pageTotal: 0,
				ordeInfo: {},
				dialogTabMaintenance: false,
				pickerOptions1: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				orderStausList: [{
						value: 'ORDER_WAIT_PAY',
						label: '待支付订单'
					},
					{
						value: 'ORDER_INPAY',
						label: '正在支付'
					},
					{
						value: 'ORDER_CANCEL_PAY',
						label: '取消支付订单'
					},
					{
						value: 'ORDER_WAIT_SENDGOODS',
						label: '待发货订单'
					},
					{
						value: 'ORDER_WAIT_RECVGOODS',
						label: '待收货订单'
					},
					{
						value: 'ORDER_WAIT_REVIEW',
						label: '待评论'
					},
					{
						value: 'ORDER_END_GOODS',
						label: '订单完成'
					},
					{
						value: 'ORDER_ON_ACCOUNT',
						label: '挂单下单'
					}
				],
				logValue: '',
				logList: [],
				routeQueryId :''
			}
		},
		created() {
			
			if(this.$route.query.orderId) {
				// 初始化数据
				this.routeQueryId = this.$route.query.orderId
				this.$ajax({
					type: 'GET',
					api: `order/manager/${this.routeQueryId}`
				}).then(res => {
					console.log(res)
					if(res.status === 200) {
						this.orderDetail(res.data)
					}
					this._initOrderList()
				})
				
				return
			}
			// 初始化数据
			this._initOrderList()
			// 获取物流公司列表
			this._getLogistics()
		},
		methods: {
			showDialog(item) {
				this.targetOrderId = item.id
				this.dialogTabMaintenance = true
			},
			submitManager(num) {
				if(num == 2) {
					this.dialogTabMaintenance = false
					return
				}
				
				let attr  = !this.logValue ? '请选择物流公司' :  !this.logCode ? '请填写物流单号' : !this.deliveryTime ? '请选择发货日期' : '';
				if(attr) {
					this.$message({
						type: 'error',
						message: attr
					})
					return
				}
				this.$ajax({
					api: 'order/manager/sendgoods',
					params: {
						token: getToken(),
						orderId: this.targetOrderId,
						transName: this.logValue,
						transNo: this.logCode,
						shipTime: this.TransformationTime(this.deliveryTime, true),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
					}
				}).then(res => {
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$message( {
							type: 'success',
							message: '发货成功'
						})
						this._initOrderList()
						
					}
				}).catch(err => {
					this.$message( {
						type: 'error',
						message: err.message
					})
				})
				this.dialogTabMaintenance = false
				
				
			},
			_getLogistics() {
				this.$ajax({
					type: 'GET',
					api: 'order/manager/delivery'
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.logList = res.data
					}

				})
			},
			// 查看详情
			orderDetail(item) {
				this.ordeInfo = item
				this.targetList = {
					name: '2',
					title: '订单详情'
				}
			},
			// 筛选或重置
			screenFn(num) {
				if (num == 2) {
					this.page = 0
					this.filter = this.keyword = this.beginTime = this.endTime = this.name = this.orderstatus = this.filterBeginTime =
					this.filterNedTime = ''
				}
				this._initOrderList()
			},
			_initOrderList() {
				this.$ajax({
					api: 'order/manager/queryorder',
					params: {
						token: getToken(),
						name: this.name,
						orderstatus: this.orderstatus,
						beginTime: this.filterBeginTime,
						endTime: this.filterNedTime,
						filter: this.filter,
						keyword: this.keyword,
						page: this.page,
						pageSize: this.pageSize,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					this.orderList = res.data.orderList
					this.page = res.data.page.page
					this.pageTotal = res.data.page.total
					if(this.routeQueryId) {
						this.orderList.forEach((item) => {
							if(this.routeQueryId == item.id){
								this.orderDetail(item)
							}
						})
					}
				})

			},
			handleCurrentChange(page) {
				this.page = page
				this._initOrderList()
			},
			/**
			 *  格式化时间
			 *	@param {String}  unixTime 时间戳
			 * 	@param {Boolean}  isFull 是否到毫秒级
			 * */
			TransformationTime(time, isFull) {
				var ymdhis = ""
				ymdhis += time.getFullYear() + "-"
				ymdhis += (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) + "-" : (time.getMonth() + 1) + "-"
				ymdhis += time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				if (isFull === true) {
					ymdhis += " " + time.getHours() < 10 ? " " + '0' + time.getHours() + ":" : " " + time.getHours() + ":"
					ymdhis += time.getMinutes() < 10 ? '0' + time.getMinutes() + ":" : time.getMinutes() + ":"
					ymdhis += time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
				}
				return ymdhis
			},
			// 获取前一周时间
			getOneWeekDate(num) {
				let before = ''
				let target = new Date()
				let nowdate = new Date()
				switch (num) {
					case 1:
						before = new Date(nowdate - (7 * 24 * 3600 * 1000))
						break;
					case 2:
						nowdate.setMonth(nowdate.getMonth()-1);
						before = nowdate
						nowdate = target
						break;
				}
				this.filterBeginTime = this.beginTime =
					`${before.getFullYear()}-${(before.getMonth() +1)}-${before.getDate()} 00:00:00`
				this.filterNedTime = this.endTime =
					`${nowdate.getFullYear()}-${(nowdate.getMonth() +1)}-${nowdate.getDate()} 00:00:00`

			}
		},
		watch: {
			beginTime: function (val) {
				if(val) {
					val = typeof val == 'string' ? new Date(val) : val
					this.filterBeginTime = this.TransformationTime(val, true)
				}
			},
			endTime: function (val) {
				if(val) {
					val = typeof val == 'string' ? new Date(val) : val
					this.filterNedTime = this.TransformationTime(val, true)
				}
			}
		},
		components: {
			tabs,
			currentPage,
			orderDetail
		},
		computed: {
			...mapGetters([
				'tabCurrentIndex'
			])
		}
	}
</script>
